<template>
  <div class="mainDiv">
    <div class="modelTitle">基本信息</div>
    <el-form ref="cmpForm" label-width="150px" label-position="left" style="padding-left: 40px; width: 80%; marginBottom: 40px;">
      <el-form-item label="企业名称" prop="name">
        <span>{{ companyDetail.name }}</span>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="credit_code">
        <span>{{ companyDetail.credit_code }}</span>
        <!-- <el-button style="margin-left: 50px">征信资料</el-button> -->
      </el-form-item>
      <el-form-item label="企业营业执照" prop="business_license">
        <img :src="companyDetail.business_license" class="licenseImg" alt="">
        <!-- <img :src="$store.state.user.avatar" class="licenseImg" alt=""> -->
      </el-form-item>
      <el-form-item label="所属行业">
        <span>{{ companyDetail.industry.name }}</span>
      </el-form-item>
      <el-form-item label="企业简介" prop="intro">
        <span v-html="companyDetail.intro" />
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <span>{{ companyDetail.full_address }}</span>
      </el-form-item>
      <el-form-item label="公司网址" prop="address">
        <span>{{ companyDetail.website }}</span>
      </el-form-item>
      <!-- <el-form-item label="企业照片" prop="image">
        <div class="imageList">
          <div class="cmpImg"><img :src="$store.state.user.avatar"></div>
          <div class="cmpImg"><img :src="$store.state.user.avatar"></div>
          <div class="cmpImg"><img :src="$store.state.user.avatar"></div>
        </div>
      </el-form-item> -->
    </el-form>
    <div class="modelTitle">招聘者信息</div>
    <el-form ref="recruiterForm" label-width="150px" label-position="left" style="padding-left: 40px; width: 80%; marginBottom: 40px;">
      <el-form-item label="邮箱" prop="contact_email">
        <span>{{ companyDetail.contact_email }}</span>
      </el-form-item>
      <el-form-item label="姓名" prop="contact_name">
        <span>{{ companyDetail.contact_name }}</span>
      </el-form-item>
      <el-form-item label="联系方式" prop="contact_phone">
        <span>{{ companyDetail.contact_phone }}</span>
      </el-form-item>
    </el-form>
    <el-row v-if="auditStatus == 1" style="margin-left: 40px;">
      <el-button type="success" @click="handleAuditCompany(4)">通过</el-button>
      <el-button type="danger" @click="handleAuditCompany(2)">拒绝</el-button>
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
    <el-row v-else-if="auditStatus == 4" style="margin-left: 40px;">
      <el-button type="danger" @click="handleAuditCompany(3)">中止合作</el-button>
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
    <el-row v-else-if="auditStatus == 3" style="margin-left: 40px;">
      <el-button type="success" @click="handleAuditCompany(5)">恢复合作</el-button>
      <!-- <el-button type="danger" @click="handleDeleteClick">删除</el-button> -->
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
    <el-row v-else style="margin-left: 40px;">
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
  </div>
</template>

<script>
import { getCompanyDetail, auditCompany, deleteCompany } from '../../api/company'
export default {
  data() {
    return {
      companyDetail: {
        industry: {}
      },
      auditStatus: null,
      companyId: null,
      defaultProps: {
        children: 'children',
        label: 'label',
        value: 'label'
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.companyId = this.$route.query.id
      this.getCompanyDetail()
    } else {
      this.$router.push({ path: './list' })
    }
  },
  methods: {
    goBackList() {
      // this.$router.push({ path: './list' })
      this.$router.back()
    },
    // 获取企业详情
    getCompanyDetail() {
      const loading = this.$loading({
        lock: true,
        text: '正在操作，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getCompanyDetail(this.companyId).then(res => {
        this.auditStatus = res.audit_status
        this.companyDetail = res.company
      }).catch(() => {
      }).finally(() => {
        loading.close()
      })
    },
    // 审核企业
    handleAuditCompany(type) {
      let aletMsg = ''
      if (type === 2) {
        aletMsg = '是否拒绝该企业'
      } else if (type === 3) {
        aletMsg = '是否与该企业中止合作'
      } else if (type === 4) {
        aletMsg = '是否确认通过审核'
      } else if (type === 5) {
        aletMsg = '是否与该企业恢复合作'
      }
      this.$confirm(aletMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        auditCompany(this.companyId, type).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
          this.getCompanyDetail()
          this.$router.back()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    // '删除'
    handleDeleteClick() {
      this.$confirm('是否确认删除该企业', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCompany(this.companyId).then(() => {
          this.$message({
            type: 'success',
            message: '企业信息删除成功'
          })
        }).then(() => {
          this.$router.push({ path: './list' })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .mainDiv {
    padding: 30px;
    .modelTitle {
      color: #222;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .licenseImg {
      width: 240px;
      height: 360px;
    }
    .imageList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .cmpImg {
        width: 300px;
        height: 200px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
